<!-- 购物车列表 -->
<script setup>
import { onShow } from '@dcloudio/uni-app'
import { ref, reactive } from 'vue'
// 引入选择规格
import SelectSpec from '../components/SelectSpec.vue';
import { getCardListApi, settlementApi } from '@/api/shop.js'
import { numberUnify } from '@/utils'
// 数据
const data = reactive({
  validList: [],
  invalidList: [],
  checkedArr: [],
  isCheckedAll: false,
  num: 1,
  showSelectSpec: false,
  specInfo: {}
})
onShow(() => {
  init()
})
function init() {
  getCardListApi({
  }).then(res => {
    const { validList, invalidList } = res.data
    data.validList = validList
    data.invalidList = invalidList

  })
}
// 选中变化
function checkedChange(list) {
  data.isCheckedAll = list.length == data.validList.length
}
// 全选全不选
function checkedAllChange(checked) {
  data.checkedArr = checked ? data.validList : []
}
// 跳转购物车管理页
function goManage() {
  uni.navigateTo({
    url: '/subPackage/shop/shoppingCart/manage'
  })
}
// 选择规格
function selectSpec() {
  return false
  // console.log('show')
  data.showSelectSpec = true
}
// 选择规格回调
function confirmSelectSpec(data) {
  console.log('confirmSelectSpec', data);
}
// 结算
function settlement() {
  const params = {
    pointStatus: false,
    deliveryType: 1,

  }
  console.log('data.checkedArr', data);
  data.checkedArr.forEach((item, i) => {
    params[`items[${i}].skuId`] = item.sku.id
    params[`items[${i}].cartId`] = item.id
    params[`items[${i}].count`] = item.count
  })
  // 模拟下单
  settlementApi(params)
    .then(res => {
      // 前往创建订单页面
      uni.navigateTo({
        url: '/subPackage/shop/createorder/index?info=' + JSON.stringify(res.data)
      })
    })
}
</script>

<template>
  <view class="carList-page">
    <!-- 购物车管理入口 -->
    <view class="manage-box">
      <view class="cnt" @click="goManage">
        <image style="width: 40rpx;height: 40rpx;" src="/static/images/icons/car_manage.png" mode="scaleToFill" />
        <text>管理</text>
      </view>
    </view>
    <!-- 购物车列表 -->
    <view class="car-list-box">
      <up-checkbox-group v-model="data.checkedArr" placement="column" inactiveColor="#CCCCCC" activeColor="#FFC870"
        @change="checkedChange">
        <!-- 未失效 -->
        <view class="item" v-for="item in data.validList" :key="item">
          <up-checkbox shape="circle" :name="item" label=""></up-checkbox>
          <view class="card">
            <view class="left">
              <image style="width: 120rpx; height: 120rpx;" :src="item.spu.picUrl" mode="scaleToFill" />
              <view v-show="false" class="mask-box">
                <text>已下架</text>
              </view>
            </view>
            <view class="right">
              <view class="title up-line-2">
                <text>{{ item.spu.name }}</text>
              </view>
              <view class="sku" @click="selectSpec">
                <text>规格：{{ item.sku.properties[0].valueName }}</text>
                <up-icon name="arrow-down" color="#444444" size="12"></up-icon>
              </view>
              <view class="priceAndNmu">
                <view class="price">￥ {{ numberUnify(item.sku.price / 100) }}</view>
                <up-number-box v-model="item.count" :min="1" :max="item.sku.stock"></up-number-box>
              </view>
            </view>
          </view>
        </view>
        <!-- 已失效 -->
        <view class="item" v-for="item in data.invalidList" :key="item">
          <up-checkbox :disabled="true" shape="circle" :name="item" label=""></up-checkbox>
          <view class="card">
            <view class="left">
              <image style="width: 120rpx; height: 120rpx;" :src="item.spu.picUrl" mode="scaleToFill" />
              <view v-show="true" class="mask-box">
                <text>已下架</text>
              </view>
            </view>
            <view class="right">
              <view class="title up-line-2">
                <text>{{ item.spu.name }}</text>
              </view>
              <view class="sku" @click="selectSpec">
                <text>规格：{{ item.sku.properties[0].valueName }}</text>
                <up-icon name="arrow-down" color="#444444" size="12"></up-icon>
              </view>
              <view class="priceAndNmu">
                <view class="price">￥ {{ item.spu.price }}</view>
                <up-number-box v-model="item.count" :min="1" :max="item.sku.stock"></up-number-box>
              </view>
            </view>
          </view>
        </view>
      </up-checkbox-group>
    </view>
    <!-- 底部栏 -->
    <view class="bottom-bar">
      <view class="content">
        <view class="left">
          <view class="all-check">
            <up-checkbox v-model:checked="data.isCheckedAll" :usedAlone="true" shape="circle" placement="row"
              activeColor="#FFC870" @change="checkedAllChange"></up-checkbox>
            <text>全选</text>
          </view>
        </view>
        <view class="right">
          <u-button :disabled="data.checkedArr.length <= 0" type="primary" size="large"
            @click="settlement">结算</u-button>
        </view>
      </view>
    </view>
    <!-- 选择规格 -->
    <SelectSpec :show="data.showSelectSpec" :info="data.specInfo" @close="data.showSelectSpec = false"
      @confirm="confirmSelectSpec" />
  </view>
</template>

<style lang="scss" scoped>
.carList-page {
  min-height: 100vh;
  background-color: #F9F9F9;

  // 购物车管理入口
  .manage-box {
    padding-top: 50rpx;
    padding-right: 30rpx;
    display: flex;
    justify-content: flex-end;

    & .cnt {
      display: flex;
      align-items: center;
      width: 106rpx;

      & text {
        padding-left: 10rpx;
        font-weight: 500;
        font-size: 28rpx;
        color: #333333;
      }
    }
  }

  // 购物车列表
  .car-list-box {
    padding-bottom: 186rpx;

    & .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 30rpx;
      padding: 0 30rpx;

      // 购物车信息
      & .card {
        display: flex;
        justify-content: space-between;
        // margin-left: 30rpx;
        padding: 20rpx;
        padding-bottom: 40rpx;
        width: 624rpx;
        background: #FFFFFF;
        border-radius: 10rpx;

        & .left {
          position: relative;
          width: 120rpx;
          height: 120rpx;
          overflow: hidden;
          border-radius: 10rpx;

          & .mask-box {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 9;
            width: 120rpx;
            height: 120rpx;
            line-height: 120rpx;
            text-align: center;
            background: rgba(0, 0, 0, 0.5);

            & text {
              font-weight: 500;
              font-size: 20rpx;
              color: #FFC870;
            }
          }
        }

        & .right {
          width: 444rpx;

          // 标题
          & .title {
            width: 444rpx;
            font-weight: 500;
            font-size: 28rpx;
            color: #333333;
          }

          // 规格
          & .sku {
            display: flex;
            justify-content: space-between;
            margin-top: 10rpx;

            & text {
              font-weight: 400;
              font-size: 24rpx;
              color: #333333;
            }

            &::v-deep .u-icon {
              padding-top: 4rpx;
              align-items: baseline;
            }
          }

          // 价格和数量
          & .priceAndNmu {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 10rpx;

            & .price {
              font-weight: 500;
              font-size: 28rpx;
              color: #FF3141;
            }
          }
        }
      }
    }
  }

  // 底部栏
  .bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9;
    width: 100%;
    height: 176rpx;
    background: #FFFFFF;

    & .content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18rpx 30rpx;

      & .all-check {
        display: flex;
        align-items: center;

        & text {
          margin-left: 16rpx;
          font-weight: 500;
          font-size: 28rpx;
          color: #333333;
        }
      }

      & .right {
        &::v-deep .u-button {
          width: 308rpx;
          height: 90rpx;
          font-weight: 500;
          font-size: 32rpx;
          color: #FFFFFF;
          border: none;
          background: #FFA618;
          border-radius: 50rpx;
        }
      }
    }
  }
}
</style>